<template>
	<view class="scrollArticle">
		<u-notice-bar fontSize='28rpx' :text="articleList" direction='column' mode="link"
			@click="openDialog"></u-notice-bar>
		<u-popup :show="popupShow" @close="popupShow=false" mode='center' round='10rpx' :customStyle="{width:'90%'}"
			closeable>
			<view class="detailContent" v-if="articleContent">
				<view class="fixedTop">
					<u-collapse @change="collapseChange" @close="collapseClose" @open="collapseOpen">
						<u-collapse-item :title="articleContent.title" name="Docs guide">
							<view class="u-collapse-content" v-for="(item,index) in articleListAll" :key="index">
								<a class="" v-if="item.articleFormat==1" :href="item.hyperlinkUrl">
									{{item.title}}
								</a>	
								<view v-else class="u-collapse-content-title " :class="activeIndex==index?'active':''" @click="clickItem(item,index)">
									<!-- <u-tag :text="item.title" plain size="mini" @click="clickItem(item)"></u-tag> -->
									{{item.title}}
								</view>
								
							</view>
						</u-collapse-item>
					</u-collapse>
				</view>
				<view class="fixedBox">
					<view class="video" v-if="articleContent.videoUrl">
						<video style="width: 100%; border-radius: 8rpx;" controls
							:src="articleContent.videoUrl"></video>
					</view>
					<view class="text" v-else>
						<!-- <rich-text :nodes="articleContent.content" @itemclick="imageClick"></rich-text> -->
						<!-- <view class="title_value tips" id="title_value" ref="tips" v-html='articleContent.content'></view> -->
						<u-parse :content="articleContent.content" ></u-parse>
					</view>

				</view>

			</view>
		</u-popup>
	</view>

</template>

<script>
	import {
		getAllArticle
	} from '@/api/platform/ArticleManagement.js'
	export default {
		name: "scrollArticle",
		props: ['codeId'],
		data() {
			return {
				articleList: [],
				articleListAll: [],
				popupShow: false,
				articleContent: '',
				activeIndex:'',
			};
		},
		mounted() {
			this.getAllArticleList()

		},
		methods: {
			collapseChange(e) {
				// console.log('open', e)
			},
			collapseClose(e) {
				// console.log('close', e)
			},
			collapseOpen(e) {
				// console.log('change', e)
			},
			clickItem(item,index) {
				this.activeIndex=index
				this.articleContent = item
				console.log('clickItem', item)
			},
			imageClick(e) {
				// 获取点击的元素和图片的src
				console.log('e', e)
				if (e.detail.node.name == 'img') {
					let src = e.detail.node.attrs.src
					uni.previewImage({
						current: src, // 当前显示的图片链接
						urls: [src] // 需要预览的图片链接列表
					});

				}

			},
			openDialog(index) {
				this.activeIndex=index
				this.articleContent = this.articleListAll[index]
				this.popupShow = true
			},
			getAllArticleList() {
				let that = this
				this.articleList = []
				this.articleListAll = []
				let query = {
					displayLocation: this.codeId,
					state:1
				}
				getAllArticle(query).then(res => {
					if (res.code == 200 && res.data.length > 0) {
						let data = res.data
						that.articleListAll = res.data
						data.forEach(ele => {
							that.articleList.push(ele.title)
						})
					}else{
						this.$emit('closeScrollArticle')
					}
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.scrollArticle {
		margin-bottom: 10rpx;

		::v-deep .u-notice__swiper {
			line-height: 40rpx !important;
			height: 40rpx !important;
		}

		.detailContent {
			margin-top: 58rpx;
			padding: 6px;
			max-height: 80vh;
			// overflow: hidden;
			overflow-y: auto;

			.fixedTop {

				::v-deep .u-cell__title-text {
					font-size: 30rpx;
					font-weight: bold;
					line-height: 40rpx;
					text-align: center;
				}


				.u-collapse-content {
					font-weight: normal;
					text-align: left;
					font-size: 30rpx;
					line-height: 40rpx;

					.u-collapse-content-title {
						line-height: 40rpx;
						color: #3C9CFF;
						border: 1rpx solid #3C9CFF;
						border-radius: 8rpx;
						padding: 3rpx 16rpx;
						margin-bottom: 10rpx;

					}
					.u-collapse-content-title.active {
						color: #fff;
						background-color: #3C9CFF;
					
					}
				}
			}

			.fixedBox {
				// max-height: 80vh;
				// overflow-y: auto;
				margin-top: 10rpx;

				.text {
					font-size: 28rpx;
					color: #646464;
					line-height: 40rpx;
					word-break: break-all;

					::v-deep img {
						max-width: 100% !important;
						max-height: 100% !important;
						text-align: center;
						display: block;
						margin: 5rpx auto;
						border-radius: 8rpx;
					}
				}
			}
		}

	}
</style>